<template>
  <div class="my_icon">
    <img src="../../assets/logo.png" alt="" @click="toggleFullscreen" v-if="!isScreenFull">
    <img src="../../assets/logo.png" alt="" @click="toggleFullscreen" v-else>
    <z_menu
      :data="folderList"
      :list1="list1"
      :list2="list2"
      @openDropDown="openDropDown"
      @clickDropDown="clickDropDown"
      @clickChildren="clickChildren"
      @clickOpenChildren="clickOpenChildren"
    >
    </z_menu>
    <!-- <vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop"></vue-esign> -->
    <vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
    <button @click="handleReset">清空画板</button> 
    <button @click="handleGenerate">生成图片</button>
  </div>
</template>

<script>
  import z_menu from '@/components/common/z_menu'
  import screenfull from 'screenfull'  //全屏功能
  export default {
    components: {
      z_menu
    },
    data () {
      return {
        isScreenFull:false,       //是否全屏
        folderList: [
          { name: '文件夹1', id: 1, children:[ { name: '可以点击的列表1', id: 2, children:[] }, { name: '可以点击的列表2', id: 3, children:[] } ] },
          { name: '文件夹2', id: 4, children:[] },
          { name: '文件夹3', id: 5, children:[{ name: '列表3', id: 6, children:[] }] },
          { name: '文件夹4', id: 7, children:[{ name: '列表4', id: 2, children:[] }] }
        ],
        list1: [
        { name: '修改名称', type:'editParent' },
        { name: '新增图表', type:'addChild' },
        { name: '删除', type:'del' }
        ],
        list2: [
          { name: '修改名称', type:'editChild' },
          { name: '删除', type:'del' }
        ],
        // esign
          lineWidth: 6,
          lineColor: '#000000',
          bgColor: '',
          resultImg: '',
          isCrop: false
        }
      },
    mounted () {
      // 监听窗口大小改变，screenfull.isFullscreen的值为是否全屏，若是则true，反之false
      window.onresize = () => {
        this.isScreenFull = screenfull.isFullscreen
        console.log(screenfull.isFullscreen)
      }
    },
    methods: {
      handleReset () {
        this.$refs.esign.reset()
      },
      handleGenerate () {
        this.$refs.esign.generate().then(res => {
          this.resultImg = res
        }).catch(err => {
          alert(err) // 画布没有签字时会执行这里 'Not Signned'
        })
      },
      toggleFullscreen () {
        if(!screenfull.isEnabled){     //判断一下浏览器是否支持全屏显示
          this.$message({
            message:'浏览器不能全屏',
            type:'warning'
          })
          return false
        }
        screenfull.toggle()           
      },
      clickOpenChildren (parent) {
        console.log('点击父级菜单，返回当前的父级对象')
      },
      clickChildren (parent, child) {
        console.log('点击子级菜单，返回父级和子级对象')
        alert('你点击了' + child.name)
      },
      openDropDown (child) {
        console.log('点击设置，返回点击了的当前的对象')
      },
      clickDropDown (dropDown) {
        console.log('点击具体操作，返回当前操作的对象')
      },
    },
  }
</script>
